<template>
	<view class="warp">
		<u-toast ref="uToast"></u-toast>
		<!-- #ifdef APP-PLUS -->
		<view class="title-contents">
			<view class="top-view status"></view>
		</view>
		<!-- #endif -->
		<view class="login-title">
			<view class="logo">
				<image src="/static/images/common/logo.png" mode=""></image>
			</view>
		</view>
		<!-- 密码登录 -->
		<view class="login-phone form-wapper">
			<view class="phone input-wapper">
				<view class="lside"><text class="iconfont icon-shouji"></text></view>
				<view class="mobile rside">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
						<u-form-item prop="userInfo.name" ref="item1">
							<u--input v-model="username" placeholder="请输入手机号" border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
			<view class="phone input-wapper">
				<view class="lside"><text class="iconfont icon-yanzhengma"></text></view>
				<view class="mobile rside">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="form3">
						<u-form-item prop="userInfo.vercode" ref="item1">
							<u--input v-model="password" placeholder="请输入验证码" border="none"></u--input>
						</u-form-item>
					</u--form>
					<!-- <input placeholder-class="input-placeholder" type="number"
						placeholder="请输入验证码" /> -->
				</view>

				<view>
					<button type="default" @click="sendSms" native-type="button"
						:disabled="codeBtnDisabled">获取验证码</button>
				</view>
			</view>
			<view class="code input-wapper">
				<view class="lside"><text class="iconfont icon-mima2"></text></view>
				<view class="rside">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="form2">
						<u-form-item prop="userInfo.password" ref="item1">
							<u--input v-model="vercode" placeholder="请输入密码(6-12位)" border="none">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>

		<button type="primary" class="login-btn" @click="Reg">注册</button>
		<view class="reg-paw"><text class="active" @click="back">已有账号,返回登录</text></view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			requt: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			user: [],
			show: true,
			username: "",
			password: "",
			vercode: "",
			codeBtnDisabled: false,
			code_text: "发送验证码",
			model1: {
				userInfo: {
				},
			},
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					pattern: /^1[3-9]\d{9}$/,
					message: '手机号格式不正确',
					// trigger: 'blur',
				},
				'userInfo.password': {
					type: 'string',
					required: true,
					message: '请填写密码',
					// trigger: 'blur'
				},
				'userInfo.vercode': {
					type: 'string',
					required: true,
					message: '请填写验证码',
					// trigger: 'blur'
				},
			},
			radio: '',
			switchVal: false
		};
	},
	onLoad() {
	},
	methods: {
		//注册接口
		Reg() {
			let vvercode = this.vercode
			// this.$refs.form1.validate().then(res => {
			// 	uni.$u.toast('校验通过')
			// }).catch(errors => {
			// 	uni.$u.toast('不能为空')
			// })
			// this.$refs.form2.validate().then(res => {
			// 	uni.$u.toast('校验通过')
			// }).catch(errors => {
			// 	uni.$u.toast('不能为空')
			// })
			// this.$refs.form3.validate().then(res => {
			// 	uni.$u.toast('校验通过')
			// }).catch(errors => {
			// 	uni.$u.toast('不能为空')
			// })
			// login({
			// 	username: this.username,
			// 	password: this.password,
			// }).then((res) => {
			// 	console.log(res);
			// 	if (res.code == 0) {
			// 		let { token } = res;
			// 		localStorage.setItem("token", token); //通行证 验证身份 过期时间
			// 		this.$store.dispatch("getUserInfo", token);
			// 		setTimeout((v) => {
			// 			this.$router.back();
			// 		}, 100);

			// 		//success
			// 	} else {
			// 		this.$toast(res.msg || "登录失败");
			// 	}
			// });
			uni.request({
				url: this.requt + '/user/reg',
				method: "POST",
				data: {
					username: this.username,
					password: this.password,
					vercode: vvercode
				},
				success: res => {
					console.log(res);
					if (res.data.code == 0) {
						console.log('注册成功')
						uni.naigateTo({
							url: '/pages/public/login'
						})
					}
				},
				fail: err => {
					console.error(err);
					if (res.data.code == 1) {
						uni.$u.toast('已有帐号，请去登陆')
						console.log("已有帐号，请去登陆")
						uni.naigateTo({
							url: '/pages/public/login'
						})
					}
				}
			});
		},
		//点击发送验证码
		sendSms() {
			uni.request({
				url: this.requt + '/user/sendSms',
				method: "POST",
				data: {
					mobile: this.username,
					type: "register",
				},
				success: res => {
					console.log(res);
					console.log(this.username)
					if (res.data.code == 0) {
						//发送成功
						console.log(`短信已发送到手机号${this.username},请注意查收`)

						// 验证码 倒计时
						let count = 15;
						let timer = setInterval(() => {
							count--;
							this.code_text = `${count}s后再次获取`;

							if (count <= 0) {
								clearInterval(timer);
								this.code_text = `再次获取`;
								this.codeBtnDisabled = false;
								count = 60;
							}
						}, 1000);
					} else {
						uni.$u.toast(res.msg || "发送失败");
						this.codeBtnDisabled = false;
						this.code_text = "再次发送";
					}
				},
				fail: err => {
					console.log(err);
					uni.$u.toast(err.msg || "发送失败");
					this.codeBtnDisabled = false;
					this.code_text = "再次发送";
				}
			});
		},
	},
};

</script>
<style lang="scss">
@import "login.scss"
</style>
</style>
